<!-- Page header -->
<div class="page-header d-print-none">
    <div class="container-xl">
        <div class="row g-2 align-items-center">
            <div class="col">
                <!-- Page pre-title -->
                <!-- <div class="page-pretitle">
                  子标题
                </div> -->
                <h2 class="page-title" id="article_list_board_title">
                    首页
                </h2>
                <!-- 帖子数量 -->
                <div class="text-muted mt-1" id="article_list_count_board"></div>
            </div>
            <!-- Page title actions -->
            <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                    <!-- 发新帖按钮 宽屏 -->
                    <a href="javascript:void(0);" class="btn btn-primary d-none d-sm-inline-block article_post">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 5l0 14"/>
                            <path d="M5 12l14 0"/>
                        </svg>
                        发布帖子
                    </a>
                    <!-- 发新帖按钮 窄屏 -->
                    <a href="javascript:void(0);" class="btn btn-primary d-sm-none btn-icon article_post"
                       aria-label="发布帖子">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 5l0 14"/>
                            <path d="M5 12l14 0"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Page body -->
<div class="page-body">
    <div class="container-xl">
        <div class="row justify-content-center">
            <!-- 显示列表的宽度 -->
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="divide-y" id="artical-items-body">
                            <!-- 动态生成帖子列表 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 正文 结束 -->
</div>
<script>
    $(function () {
        // ========================= 获取版块下帖子信息 =======================
        // 获取当前选中的版块
        let activeLiEl = $('#topBoardList>.active');
        // 构造query string
        let queryString = '';
        let boardData = activeLiEl.data('board');
        // 导航栏版块Item是否绑定版块数据
        if (boardData) {
            // 构造query string
            queryString = '?boardId=' + boardData.id;
            // 获取版块信息
            getBoardInfo(boardData.id);
        } else {
            // 设置版块名称
            $('#article_list_board_title').html('首页');
            $('#article_list_count_board').hide();
        }

        // ========================= 获取版块信息 =======================
        //
        function getBoardInfo(boardId) {
            if (!boardId) {
                return;
            }
            // 发送请求， 成功后，显示版块相关信息
            $.ajax({
                type: 'get',
                url: 'board/getById?id=' + boardId,
                success: function (result) {
                    if (result.code == 0) {
                        $("#article_list_board_title").html(result.data.name);
                        $("#article_list_count_board").html("帖子数量：" + result.data.articleCount);
                    } else {
                        $.toast({
                            heading: '提示',
                            text: result.message,
                            icon: 'info'
                        });
                    }
                },
                error: function () {
                    $.toast({
                        heading: '警告',
                        text: '出错了，请联系管理员',
                        icon: 'warning'
                    });
                }
            });
        }

        // ========================= 获取帖子列表 =======================
        // 成功后，调用listBuildArticleList()方法，构建帖子列表
        $.ajax({
            type: 'get',
            url: 'article/getAllByBoardId' + queryString,
            success: function (respData) {
                if (respData.code == 0) {
                    listBuildArticleList(respData.data)
                } else {
                    $.toast({
                        heading: '提示',
                        text: respData.message,
                        icon: 'info'
                    });
                }
            },
            error: function () {
                $.toast({
                    heading: '警告',
                    text: '出错了，请联系管理员',
                    icon: 'warning'
                });
            }
        });

        // ========================= 构造帖子列表 =======================
        function listBuildArticleList(data) {
            if (data.length == 0) {
                $('#artical-items-body').html('还没有帖子');
                return;
            }
            // 默认头像路径
            let avatarUrl = 'image/avatar01.jpeg';
            // 遍历结果
            data.forEach(article => {
                // 设置默认头像
                if (!article.user.avatarUrl) {
                    article.user.avatarUrl = avatarUrl;
                }
                // 构造HTML
                let articleHtmlStr = '<div>'
                    + ' <div class="row">'
                    + ' <div class="col-auto">'
                    + ' <span class="avatar" style="background-image: url(' + article.user.avatarUrl + ')"></span>'
                    + ' </div>'
                    + ' <div class="col">'
                    + ' <div class="text-truncate">'
                    + ' <a href="javascript:void(0);" class="article_list_a_title">'
                    + ' <strong>' + article.title + '</strong>'
                    + ' </a>'
                    + ' </div>'
                    + ' <div class="text-muted mt-2">'
                    + ' <div class="row">'
                    + ' <div class="col">'
                    + ' <ul class="list-inline list-inline-dots mb-0">'
                    + ' <li class="list-inline-item">'
                    + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"'
                    + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                    + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                    + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                    + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
                    + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
                    + ' </svg> '
                    + article.user.nickname
                    + ' </li>'
                    + ' <li class="list-inline-item">'
                    + ' <svg xmlns="http://www.w3.org/2000/svg"'
                    + ' class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
                    + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                    + ' stroke-linecap="round" stroke-linejoin="round">'
                    + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                    + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
                    + ' <path d="M12 7v5l2 2"></path>'
                    + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">'
                    + ' </path>'
                    + ' </svg> '
                    + article.createTime
                    + ' </li>'
                    + ' </ul>'
                    + ' </div>'
                    + ' <div class="col-auto d-none d-md-inline">'
                    + ' <ul class="list-inline list-inline-dots mb-0">'
                    + ' <li class="list-inline-item">'
                    + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
                    + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                    + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                    + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                    + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
                    + ' <path'
                    + ' d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
                    + ' </path>'
                    + ' </svg> '
                    + article.visitCount
                    + ' </li>'
                    + ' <li class="list-inline-item">'
                    + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart"'
                    + ' width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
                    + ' fill="none" stroke-linecap="round" stroke-linejoin="round">'
                    + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                    + ' <path'
                    + ' d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">'
                    + ' </path>'
                    + ' </svg> '
                    + article.likeCount
                    + ' </li>'
                    + ' <li class="list-inline-item">'
                    + ' <svg xmlns="http://www.w3.org/2000/svg"'
                    + ' class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
                    + ' viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
                    + ' stroke-linecap="round" stroke-linejoin="round">'
                    + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
                    + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
                    + ' <path d="M12 12l0 .01"></path>'
                    + ' <path d="M8 12l0 .01"></path>'
                    + ' <path d="M16 12l0 .01"></path>'
                    + ' </svg> '
                    + article.replyCount
                    + ' </li>'
                    + ' </ul>'
                    + ' </div>'
                    + ' </div>'
                    + ' </div>'
                    + ' </div>'
                    + ' </div>'
                    + ' </div>';
                // 转为元素对象
                let articleItem = $(articleHtmlStr);
                // 获取标题的 a 标签
                let articleTitle = articleItem.find('.article_list_a_title');
                // 处理标题点击事件
                articleTitle.click(function () {
                    // 通过全局变量保存当前访问的帖子信息
                    currentArticle = article;
                    removeNavActive();
                    $('#bit-forum-content').load('details.html');
                });
                // 添加到列表
                $('#artical-items-body').append(articleItem);
            });
        }

        // ================== 处理发贴事件 =====================
        $('.article_post').click(function () {
            console.log('加载发贴页面');
            removeNavActive();
            $('#bit-forum-content').load('article.html');
        });

    });
</script>